<template>
	<view class="body">
		<view class="top">
			<view class="top1">
				<img src="../../static/logo_03.gif" alt="">
			</view>
			<view class="top2">
				<p class="iconfont p1">&#xe601;</p>
				<p class="p2">13512341234</p>
				<p class="p3">余额:</p>
				<p class="p4">0</p>
				<p class="p5" @tap="chongzhijilu()">充值记录</p>
			</view>
			
			<view class="bottom" v-for="(item,index) in recharge.extend.setMeal.rechargeSetmealList" :key="index" >
				<p id="s" class=" flag p1" v-on:@tap="yanse()" ref="yanse">{{item.rechargeSetmealName}}</p>
			</view>	
			<view class="bottom" v-for="(item,index) in recharge.extend.setMeal.waterbillSetmealList" :key="index">
		        <p id="s" class=" flag p2" v-on:@tap="yanse()" ref="bianse" >{{item.waterbillSetmealName}}</p>
				<!-- <p id="s" class=" flag p3">12元水票买十送一</p>
				<p id="s" class=" flag p4">充1000送100</p>
				<p id="s" class=" flag p5">500元</p>
				<p id="s" class=" flag p6">300元</p>
				<p id="s" class=" flag p7">200元</p>
				<p id="s" class=" flag p8">100元</p>
				<p id="s" class=" flag p9">50元</p>
				<p id="s" class=" flag p10">其他金额</p>	 -->
			
		 </view>	
		</view>
	    	<view class="im">
	    	<button>马上充值</button>
	    </view>
	</view>
</template>

<script>
	
  
	export default {
	
		data() {
			return {
			    recharge:{},
			}
		},
		computed:{
			 
		
		},
		onLoad() {
	            //充值套餐展示
	          uni.request({
	              	url: 'https://www.zunyishengshui.com/maishui/waterbillSetmeal/selectAllwaterbillSetmeal', //仅为示例，并非真实接口地址。
	              	method:'POST',
	              	data: {
	          			
	              	},
	              	header:{
	              		'content-type': 'application/x-www-form-urlencoded', 
	              	},
	              	success: (res) => {
					    /* console.log(res) */
	              		this.recharge = res.data;
	              		console.log(this.recharge);
	              		this.text = 'request success';
	              		
	              	}
	              })  	
		},
		methods: {
	     
        chongzhijilu(){
        	uni.navigateTo({
        		url:"../../components/record/record"
        	})
        },

      yanse(){
		  this.$refs.yanse.style.background="#3B9CDB"
		  this.$refs.bianse.style.background="#3B9CDB"
	  }



	}
	}
		
		
			
			
</script>

<style>
     .bottom .a1:active{
		  background-color: rgba(59, 156, 219, 1);
		  color: #fff;
		  border-color: rgba(59, 156, 219, 1);
	  }
    .body{
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
		display: flex;
	    flex-direction: column;
	    overflow: hidden; 
	}
  .top{
		  width: 95%;
		  height: 982upx;
		  margin: 20upx auto;
		  background-color: #fff;
  }
  .top .top1 img{
		margin-left: 133px;
		margin-top: 24px;
		width: 109px;
		height: 104px;
		
		/* margin: 24px auto; */

  }
  .flag{
	  width: 25%;
  }
  .top .top1{
	  border-bottom:1px solid #f2f2f2;
	  height: 150px;
	  
  }
  .top .top2 {
	  display: flex;
  }
  .top .top2 p {
	  margin-top:10px;
  }
  .top .top2 .p1{
	  color: rgba(59, 156, 219, 1);
	  margin-left: 17px;
	  background: #3B9CDB;
  }
  .top .top2 .p2{
	 margin-left: 3px;
	  width: 80px;
	  height: 17px;
	  color: rgba(16, 16, 16, 1);
	  font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
  }
  .top .top2 .p3{
	  width: 30px;
      height: 17px;
	  color: rgba(16, 16, 16, 1);
      font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  margin-left: 36px;
  }
  .top .top2 .p4{
	 color:rgba(59, 156, 219, 1);
	  width: 10px;
	  height: 17px;
	   font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  margin-left: 5px;
  }
  .top .top2 .p5{
	  
	margin-left: 80px;
	width: 48px;
	height: 17px;
	color: rgba(16, 16, 16, 1);
	font-size: 12px;
	text-align: left;
	font-family: PingFangSC-regular;
}
.top .top2{
	 border-bottom:1px solid #f2f2f2;
}
.top .bottom p{
	margin-top:16px;
	margin-left: 15px;
	float:left;
	width: 150px;
	height: 35px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 1);
	color: rgba(51, 51, 51, 1);
	font-size: 12px;
	text-align: center;
	line-height: 35px;
	font-family: Arial;
	border: 1px solid rgba(153, 153, 153, 1);

}
.top .bottom .active{
	background-color: rgba(59, 156, 219, 1);
	color: #fff;
	border-color: rgba(59, 156, 219, 1);
	}
	
	
	.im  button{
		display: block;
		width: 90%;
		height: 40px;
		border-radius: 4px;
		background-color: rgba(59, 156, 219, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Microsoft Yahei;
		float:bottom;
		margin-top:500px;
		line-height: 40px;
		margin:auto;
		bottom:0;

	}
	.im{
		width: 95%;
		background-color: #fff;
		margin:auto;
		margin-top:-10px;
		height: 110px;
		}
</style>
